<script setup lang="ts">
import { cancelIntercityOrderAPI } from '@/apis/cancelIntercityOrder'
import { cancelOrderAPI } from '@/apis/cancelOrder'
import { useGeneralConfigStore } from '@/store/generalConfig'
import { useOrdersTabSelectionStore } from '@/store/ordersTabSelection'
import { useUserInfoStore } from '@/store/userInfo'
import type { IntercityOrderStatus } from '@/types/enum'
import { OrderStatus } from '@/types/enum'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const generalConfigStore = useGeneralConfigStore()
const ordersTabSelectionStore = useOrdersTabSelectionStore()

const type = ref<'normal' | 'intercity'>()
const id = ref('')
const status = ref<OrderStatus | IntercityOrderStatus>()

const tipText = computed(() => {
  if (type.value === 'normal')
    return '此订单司机已经接单，取消订单会扣除部分款项退回'
  else
    return '取消订单会扣除部分款项退回，可查看取消订单说明'
})
const isAgree = ref(false)

onLoad((options) => {
  if (!options?.type || !options?.id || !options?.status) {
    uni.showToast({ title: '获取数据失败', icon: 'none' })
    return
  }
  type.value = options.type
  id.value = options.id
  status.value = Number(options.status) as OrderStatus | IntercityOrderStatus
})

const selectedReasonIndex = ref(0)
const isSelectOtherReason = computed(() => {
  return selectedReasonIndex.value === generalConfigStore.generalConfig?.cannel_reason.length
})
const reasonText = ref('')

const handleSubmit = useThrottleFn(async () => {
  if (!isAgree.value) {
    uni.showToast({ title: '请先阅读并同意取消协议', icon: 'none' })
    return
  }
  if (type.value === 'normal') {
    const res = await cancelOrderAPI({
      id: id.value,
      cannel_reason:
      isSelectOtherReason.value
        ? reasonText.value
        : generalConfigStore.generalConfig!.cannel_reason[selectedReasonIndex.value].reason,
    }, userInfoStore.userInfo!.token!)
    if (res.data?.code === 1) {
      uni.showModal({
        title: '取消成功',
        showCancel: false,
        success: () => {
          ordersTabSelectionStore.selectedSegmentIndex = 1
          ordersTabSelectionStore.selectedTabIndex = 2
          router.pushTab('orders')
        },
      })
    }
  }
  else {
    const res = await cancelIntercityOrderAPI({
      id: id.value,
      cannel_reason:
      isSelectOtherReason.value
        ? reasonText.value
        : generalConfigStore.generalConfig!.cannel_reason[selectedReasonIndex.value].reason,
    }, userInfoStore.userInfo!.token!)
    if (res.data?.code === 1) {
      uni.showModal({
        title: '取消成功',
        showCancel: false,
        success: () => {
          ordersTabSelectionStore.selectedSegmentIndex = 1
          ordersTabSelectionStore.selectedTabIndex = 2
          router.pushTab('orders')
        },
      })
    }
  }
}, 1000)

function handleViewProtocol(type: '取消订单协议') {
  router.push({
    name: 'protocol',
    params: { type },
  })
}
</script>

<template>
  <block v-if="status !== OrderStatus.待接单">
    <Spacer height="24" />
    <view class="mx-24rpx flex items-center">
      <image
        class="mr-8rpx h-31rpx w-31rpx flex-shrink-0"
        src="@/static/images/warning_orange_circle.png"
      />
      <view class="text-28rpx text-#333333 font-medium leading-28rpx">
        {{ tipText }}
      </view>
    </view>
  </block>
  <Spacer height="24" />
  <view class="px-24rpx">
    <view class="rounded-20rpx bg-white px-32rpx py-34rpx">
      <Spacer height="8" />
      <view class="text-30rpx text-#333333 font-bold leading-30rpx">
        请选择取消订单原因：
      </view>
      <Spacer height="44" />
      <Divider width="642" />
      <block v-for="reason, index in generalConfigStore.generalConfig?.cannel_reason" :key="index">
        <view class="h-110rpx flex items-center justify-between" @tap="selectedReasonIndex = index">
          <view class="font-meidum text-28rpx text-#333333 leading-40rpx">
            {{ reason.reason || '未知' }}
          </view>
          <Checkbox :checked="selectedReasonIndex === index" />
        </view>
        <Divider width="642" />
      </block>
      <Spacer height="36" />
      <view class="flex items-center justify-between" @tap="selectedReasonIndex = generalConfigStore.generalConfig!.cannel_reason.length">
        <view class="font-meidum text-28rpx text-#333333 leading-40rpx">
          其他原因
        </view>
        <Checkbox :checked="isSelectOtherReason" />
      </view>
      <Spacer height="18" />
      <textarea
        v-model="reasonText"
        :disabled="!isSelectOtherReason"
        class="h-204rpx rounded-10rpx bg-#FAFAFA px-30rpx py-40rpx text-28rpx text-#333333 font-medium leading-28rpx"
        placeholder="请输入您取消订单的原因"
        placeholder-class="text-28rpx text-#999999 leading-28rpx font-medium"
      />
    </view>
  </view>
  <view class="flex items-center p-24rpx" @tap="isAgree = !isAgree">
    <Checkbox :checked="isAgree" />
    <Spacer width="8" />
    <view class="text-26rpx text-#999999">
      我已阅读并同意
      <text class="text-#3F8BF6" @tap.stop="() => handleViewProtocol('取消订单协议')">
        《通达电召取消订单协议》
      </text>
    </view>
  </view>
  <Spacer height="500" />
  <view class="fixed bottom-30rpx x-center">
    <RGButton type="primary" size="large" @tap="handleSubmit">
      提交
    </RGButton>
  </view>
</template>

<route lang="yaml">
name: 'cancelOrder'
style:
  navigationBarTitleText: '取消订单'
</route>
